<!--
 * @Author: @zhangrui-1997 17805271997@163.com
 * @Date: 2023-08-10 16:02:30
 * @LastEditors: giteezr 2250368646@qq.com
 * @LastEditTime: 2023-12-27 21:30:35
 * @FilePath: \vue3-ts\src\views\bus\components\echarts\RightGraph.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div ref="RightGraph" class="RightGraph" :style="style"></div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, nextTick,  } from 'vue'
import * as echarts from 'echarts' // 全局引用，这么写的话之前配置的按需加载文件就没作用了

// 接收值
const props = defineProps({
	dataSource: {
		type: Object,
    default: false,
	}
})

// 定义值
const RightGraph = ref()
let style = reactive({
  width: "100%",
  height: "100%",
});
let obj = JSON.parse(JSON.stringify(props.dataSource));
let myEcharts = echarts;

// 定义加载函数
const initCharts = () => {
	let chart = echarts.init(RightGraph.value)
  var chartdata = obj.chartdata;
      var color = obj.color;
      var data: Array<any> = [];

      chartdata.map((item:any, index:number) => {
        data.push({
          name: item.name + "\n\n" + item.sum+ "%",
          symbolSize: item.size,
          draggable: true,
          label: {
            normal: {
              textStyle: {
                fontSize: 12,
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                {
                  offset: 0.3,
                  color: "rgba(27, 54, 72, 0.2)",
                },
                {
                  offset: 1,
                  color: color[index],
                },
              ]),
              opacity: 1,
              borderWidth: 1,
              borderColor: color[index],
              shadowBlur: 7,
              symbolOffset: 0.6,
              shadowColor: color[index],
            },
          },
        });
      });

      let option: any = {
        animationDurationUpdate: function (idx: any) {
          return idx * 1520;
        },
        tooltip: {
          backgroundColor: "#061436", // 背景
          extraCssText: "box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);", //添加阴影
          textStyle: {
            color: "#fff", //设置文字颜色
          },
          trigger: "item",
          formatter: function (params: any) {
            return params.data.tips || params.name;
          },
        },
        animationEasingUpdate: "bounceIn",
        cursor: "pointer",
        series: [
          {
            type: "graph",
            layout: "force",
            cursor: "pointer",
            force: {
              repulsion: 500,
              gravity: 0.3,
            },
            roam: true,
            label: {
              normal: {
                show: true,
              },
            },

            data,
          },
        ],
      };

      chart.setOption(option);
	// 当窗口大小改变时候，echarts重置大小
	window.addEventListener('resize', () => {
		chart.resize()
	})
}

// 监听当配置项发生变化的时候，调用加载函数
watch(
	() => props.dataSource,
	val => {
		if (Object.keys(val)) {
			nextTick(() => {
				initCharts()
			})
		}
	},
	{ immediate: true }
)
</script>

<style lang="less" scoped></style>
